<template>
	<div class="up-loading">
		<el-dialog width="400" title="图片上传" :visible.sync="value" append-to-body @close="cancel">
			<el-form label-width="120px">
				<el-form-item label="图片">
					<el-upload class="upload-demo"
					:show-file-list="false"
					:on-change="onChange"
          accept="image/*"
					:on-success="handleUploadSuccess"
					:action="uploadImgUrl" name="file" :headers="headers">
						<el-image style="width: 200px; height: 150px" v-if="imageted" :src="imageted" fit="cover">
						</el-image>
						<el-button v-else type="primary" plain size="mini">上传</el-button>
						<div slot="tip" class="el-upload__tip">· 请上传图片类型文件</div>
					</el-upload>

				</el-form-item>
				<el-form-item label="宽度">
					<el-input-number v-model="width" :min="192" :max="1920" label="宽度"></el-input-number>
				</el-form-item>
				<el-form-item label="高度">
					<el-input-number v-model="height" :min="108" :max="1080" label="高度"></el-input-number>
				</el-form-item>
				<el-form-item label="是否添加水印">
					<el-radio v-model="radio" :label="1">否</el-radio>
					<el-radio v-model="radio" :label="2">是</el-radio>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button @click="submit" type="primary">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getToken
	} from "@/utils/auth";
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				image: '',
				width: 192,
				height: 108,
				radio: 1,
				response:''
			}
		},
		computed: {
			headers() {
				return {
					Authorization: "Bearer " + getToken()
				}
			},
			uploadImgUrl() {
				return process.env.VUE_APP_BASE_API + "/cms/article/uploadImage"
			},
      imageted(){
        if(this.image){
          return process.env.VUE_APP_BASE_API + this.image
        }else{
          return ''
        }
      }
		},
		methods: {
			handleUploadSuccess(response, file, fileList) {
				this.response = response
				this.image =  response.url
			},
			onChange(e, en) {
				console.log(e, en)
			},
			cancel() {
				this.image = ''
				this.response = {}
				this.$emit('input', false)
			},
			submit() {
				this.$emit('submit', {...this.response})
				this.cancel()
			}
		}
	}
</script>
<style lang="scss" scope>
	.up-loading {
		.up-loading-image {
			position: relative;

			.up-loading-input-files {
				position: absolute;
			}
		}
	}
</style>
